<script setup>
import { computed, ref, watch } from 'vue'
import { readableTime } from '@/common/utils'

// deep 在vue3中不生效
defineOptions({
  options: { styleIsolation: 'shared' },
})

const props = defineProps({
  // 显示播放器界面
  show: {
    type: Boolean,
    default: false,
  },
  // 当前歌曲信息
  playerInfo: {
    type: Object,
    default: () => ({}),
  },
  // 播放器状态
  playerStatus: {
    type: Object,
    default: () => ({}),
  },
  // 是否显示加载
  loading: {
    type: Boolean,
    default: false,
  },
})

// 自定义事件
const emit = defineEmits([
  'playbackRate',
  'playMode',
  'play',
  'pause',
  'next',
  'prev',
  'like',
  'show:queue',
  'seek:time',
  'close',
])

// 显示播放器
const showPlayer = ref(props.show)
// 切换分类索引
const tabsIndex = ref(0)
// tabs
const tabs = ref([{ name: '歌曲' }, { name: '歌词' }])
// 导航栏高度
const navHeight = computed(() => {
  // #ifdef APP || H5
  return 54
  // #endif
  return 44
})
// 收藏图标-切换
const likeName = computed(() => {
  return props.playerInfo.like ? 'xihuan' : 'xihuan1'
})
// 收藏图标颜色-切换
const likeColor = computed(() => {
  return props.playerInfo.like ? '#a0abff' : '#ffffff'
})
// 播放、暂停图标-切换
const playName = computed(() => {
  return !props.playerStatus.paused ? 'bofang' : 'bofang1'
})
// 播放模式图标-切换
const modeName = computed(() => {
  let name = 'loop'

  if (props.playerStatus.mode === 0) name = 'loop'
  else if (props.playerStatus.mode === 1) name = 'random'
  else if (props.playerStatus.mode === 2) name = 'singlecycle'

  return name
})
// 倍速图标-切换
const beiSuName = computed(() => {
  let name = 'beisu1'

  if (props.playerStatus.playbackRate === 1.0) name = 'beisu1'
  else if (props.playerStatus.playbackRate === 1.25) name = 'beisu2'
  else if (props.playerStatus.playbackRate === 1.5) name = 'beisu3'
  else if (props.playerStatus.playbackRate === 2.0) name = 'beisu4'

  return name
})

watch(
  () => props.show,
  (newShow) => {
    showPlayer.value = newShow
  }
)

/**
 * 设置索引
 * @param index
 */
const setTabsIndex = (index) => {
  tabsIndex.value = index
}

/**
 * current 改变时会触发 change 事件
 * @param e
 */
const changeSwiper = (e) => {
  setTabsIndex(e.detail.current)
}

/**
 * 切换播放模式
 * @param type
 */
const changePlayModeType = (type) => {
  emit('playMode', type)
}

/**
 * 切换播放倍速
 * @param type
 */
const changePlaybackRate = (type) => {
  emit('playbackRate', type)
}

/**
 * 上一首
 */
const changePreviousSong = () => {
  emit('prev')
}

/**
 * 下一首
 */
const changeNextSong = () => {
  emit('next')
}

/**
 * 暂停/播放
 */
const changePaused = () => {
  if (props.playerStatus.paused) emit('pause')
  else emit('play')
}

/**
 * 喜欢
 * @param item
 */
const changePlayerLike = (item) => {
  emit('like', item)
}

/**
 * 显示播放列表界面
 */
const changeShowQueue = () => {
  emit('show:queue')
}

/**
 * 关闭播放器界面
 */
const changeClosePlayer = () => {
  emit('close')
}

/**
 * 完成一次拖动后触发的事件
 * @param value
 */
const changeSlider = (value) => {
  emit('seek:time', value)
}

/**
 * 拖动过程中触发的事件
 * @param value
 */
const changingSlider = (value) => {
  emit('seek:time', value)
}
</script>

<template>
  <u-popup
    v-model="showPlayer"
    mode="bottom"
    class="player-popup"
  >
    <view class="player-box">
      <!-- 背景高斯模糊 -->
      <view class="player-blur"></view>
      <view class="player-content u-flex-col">
        <!-- 导航栏 -->
        <ty-nav-bar
          :nav-style="{ background: 'none' }"
          icon-back-name="arrow-down"
          icon-back-color="#e9ebff"
          :height="navHeight"
          :custom-back="changeClosePlayer"
        >
          <view class="nav-bar-tabs">
            <u-tabs
              ref="tabs1"
              :list="tabs"
              inactive-color="rgba(255,255,255, 0.5)"
              active-color="#FFFFFF"
              bg-color="none"
              gutter="20"
              :show-bar="false"
              v-model="tabsIndex"
            ></u-tabs>
          </view>
        </ty-nav-bar>
        <!-- 主题内容 -->
        <view class="player-main">
          <!-- 内容切换 -->
          <view class="player-swiper">
            <swiper
              class="player-swiper-inner"
              easing-function="easeInOutCubic"
              :current="tabsIndex"
              @change="changeSwiper"
            >
              <swiper-item>
                <view class="player-swiper-item">
                  <view class="player-info">
                    <!-- 图片 -->
                    <view
                      class="player-info--pic"
                      :class="{ 'player-info--play': !playerStatus.paused }"
                    >
                      <view
                        class="pic-blur ty-rotate"
                        :class="{ 'ty-running': !playerStatus.paused }"
                      ></view>
                      <view class="pic-image">
                        <u-image
                          :src="playerInfo.pic"
                          mode="aspectFill"
                          height="100%"
                        ></u-image>
                      </view>
                      <view
                        class="player-info--action"
                        :class="{ 'ty-play': !playerStatus.paused }"
                      ></view>
                    </view>
                  </view>
                  <!-- 歌曲信息 -->
                  <view class="player-info--title">
                    <text class="name">{{ playerInfo?.name }}</text>
                    <text class="artist">{{ playerInfo?.artist }}</text>
                  </view>
                  <!-- 歌词 -->
                  <view class="player-lrc-sm">
                    <ty-lrc
                      ref="tyLrc"
                      :list="playerInfo?.lyric"
                      :currentTime="playerStatus.currentTime"
                      :loading="loading"
                      @seek="changeSlider"
                    ></ty-lrc>
                  </view>
                </view>
              </swiper-item>
              <swiper-item>
                <!-- 歌词 -->
                <view class="player-lrc-main">
                  <ty-lrc
                    ref="tyLrc"
                    :list="playerInfo?.lyric"
                    :currentTime="playerStatus.currentTime"
                    @seek="changeSlider"
                  ></ty-lrc>
                </view>
              </swiper-item>
            </swiper>
            <view
              class="player-swiper-dots"
              @click.stop
            >
              <template
                v-for="(item, index) in tabs"
                :key="index"
              >
                <view
                  class="dot"
                  :class="{ active: tabsIndex === index }"
                  @click.prevent.stop="setTabsIndex(index)"
                ></view>
              </template>
            </view>
          </view>
          <!-- 功能键 -->
          <view class="player-ability">
            <!-- 进度条 -->
            <view class="player-time">
              <text class="time">{{
                readableTime(playerStatus.currentTime)
              }}</text>
              <view class="player-progress">
                <ty-slider
                  :value="playerStatus.currentTime"
                  :max="playerStatus.duration"
                  @change="changeSlider"
                  @changing="changingSlider"
                ></ty-slider>
              </view>
              <text class="time">{{
                readableTime(playerStatus.duration)
              }}</text>
            </view>
            <!-- 图标 -->
            <view class="player-icon">
              <!-- 收藏图标 -->
              <u-icon
                custom-prefix="ty-icon"
                :name="likeName"
                :size="54"
                :color="likeColor"
                @click="changePlayerLike(playerInfo)"
              ></u-icon>
              <!-- 播放模式图标 -->
              <u-icon
                custom-prefix="ty-icon"
                :name="modeName"
                :size="54"
                color="#fff"
                @click="changePlayModeType(playerStatus.mode)"
              ></u-icon>
              <!-- 上一首图标 -->
              <u-icon
                custom-prefix="ty-icon"
                name="shangyishou"
                :size="70"
                color="#fff"
                @click="changePreviousSong"
              ></u-icon>
              <!-- 播放、暂停图标 -->
              <u-icon
                custom-prefix="ty-icon"
                :name="playName"
                :size="120"
                color="#fff"
                @click="changePaused"
              ></u-icon>
              <!-- 下一首图标 -->
              <u-icon
                custom-prefix="ty-icon"
                name="xiayishou"
                :size="70"
                color="#fff"
                @click="changeNextSong"
              ></u-icon>
              <!-- 播放倍速 -->
              <u-icon
                custom-prefix="ty-icon"
                :name="beiSuName"
                :size="54"
                color="#fff"
                @click="changePlaybackRate(playerStatus.playbackRate)"
              ></u-icon>
              <!-- 播放队列图标 -->
              <u-icon
                custom-prefix="ty-icon"
                name="playlist4-o"
                :size="54"
                color="#fff"
                @click="changeShowQueue"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<style lang="scss" scoped>
.player-box {
  overflow: hidden;
  height: 100vh;
}

.player-blur {
  background-image: var(--cover-pic);
  background-color: rgb(101 101 101);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  filter: blur(50rpx);
  transform: scale(1.2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.player-content {
  background-color: rgba($color: #000000, $alpha: 0.6);
  backdrop-filter: blur(20rpx);
  height: 100vh;
}

.nav-bar-tabs {
  flex: 1;
  @include ty-flex-row;
  @include ty-row-center;
  /* #ifdef APP || H5 */
  margin-left: -80rpx;
  /* #endif */
  /* #ifdef MP */
  margin-right: -80rpx;
  /* #endif */
}

.player-main {
  position: relative;
  z-index: 2;
  flex: 1;
  @include ty-flex-col;
  :deep(.uni-swiper-dots-horizontal) {
    bottom: 0;
    .uni-swiper-dot {
      border-radius: 16px;
      width: 8px;
      height: 5px;
      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      &.uni-swiper-dot-active {
        width: 16px;
        border-radius: 8px;
      }
    }
  }
}

.player-swiper {
  flex: 1;
  &,
  &-inner,
  &-item {
    position: relative;
  }
  &-inner {
    height: 100%;
  }
  &-item {
    @include ty-flex-col;
    @include ty-col-center;
    padding: 0 $ty-lg-padding;
    height: 100%;
  }
  &-dots {
    @include ty-flex-row;
    @include ty-row-center;
    position: absolute;
    right: 0;
    bottom: -10rpx;
    left: 0;
    .dot {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 16px;
      width: 8px;
      height: 5px;
      transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
      margin-right: $ty-md-padding;
    }
    .active {
      background-color: rgb(255, 255, 255);
      width: 16px;
    }
  }
}

.player-info {
  $info-height: 810rpx;
  position: relative;
  margin: $ty-xxlg-padding 0 0;
  height: $info-height;
  flex: 0 0 $info-height;
  @include ty-flex-col;
  @include ty-col-center;
  &--pic {
    width: 600rpx;
    height: 600rpx;
    position: relative;
    &:before,
    &:after,
    .pic-blur {
      content: '';
      background-color: $uni-bg-color-mask;
      border-radius: $uni-border-radius-circle;
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: -200rpx;
      z-index: 1;
    }
    &:before {
      backdrop-filter: blur(20rpx);
    }
    &:after {
      background-color: rgba($color: #000000, $alpha: 1);
      transform: scale(0.5);
    }
    .pic-blur {
      background-image: var(--cover-pic);
      background-repeat: no-repeat;
      background-size: cover;
      filter: blur(50rpx);
      z-index: -1;
    }
    .pic-image,
    .image-img {
      border-radius: 20rpx;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .pic-image {
      background-color: $uni-bg-color;
      box-shadow: rgba(50, 50, 50, 0.5) 0px 0px 20rpx;
      position: relative;
      z-index: 2;
    }
    .image-icon {
      position: absolute;
      bottom: $ty-md-padding;
      right: $ty-md-padding;
      z-index: 3;
    }
  }
  &--title {
    flex: 1;
    @include ty-flex-col;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    width: 600rpx;
    .name {
      color: $u-type-primary-disabled;
      font-size: 38rpx;
      margin-bottom: $ty-md-padding;
    }
    .artist {
      font-size: 28rpx;
      color: $u-type-primary-light;
    }
  }
  &--action {
    background-image: url('@/static/images/needle-ab.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -230rpx;
    right: $ty-md-padding;
    width: 182rpx;
    height: 295rpx;
    z-index: 10;
    transform-origin: top right;
    transition: all 2s;
    transform: rotate(0deg);
    &.ty-play {
      transform: rotate(25deg);
    }
  }
}

.player-ability {
  @include ty-flex-col;
  width: 100%;
  justify-content: flex-end;
  padding: $ty-lg-padding;
}

.player-icon {
  @include ty-flex-row;
  @include ty-col-center;
  justify-content: space-around;
}

.player-time {
  @include ty-flex-row;
  @include ty-col-center;
  justify-content: center;
  text-align: center;
  .time {
    font-size: 24rpx;
    color: $u-bg-color-inverse;
    display: block;
    width: 80rpx;
  }
}

.player-progress {
  margin: 0 $ty-md-padding;
  flex: 1 1 auto;
}

.player-lrc-sm {
  flex: auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: $ty-xlg-padding 0;
}

.player-lrc-main {
  padding: $ty-lg-padding $ty-lg-padding $ty-xlg-padding;
  overflow: hidden;
  height: 100%;
}
</style>
